<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>点对点聊天</title>  
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    body{padding: 20px;max-width: 450px;}
    *{padding: 0;margin:0;font-size: 14px;}
    ul,li{list-style: none;float: left;}
    .user_group{position: relative;min-height: 30px;padding-left: 15px;width: 300px;display: block;float: none;}
    .user_group:BEFORE{/* background: url(../../img/) no-repeat left; */width: 10px;height: 10px;background-color:green; content: "";left: 0;top:10px; position: absolute;border-radius:100%;}
    .user_group li{display: block;width: 100%;border-bottom: 1px solid #f5f5f5;line-height: 30px;height: 30px;}
    
    .login_div{width: 450px;padding-left: 15px;padding-top: 15px;overflow: hidden;margin-top: 1px;}
    .user_name,.cont_input{border: none;line-height: 30px;outline: none;border:1px solid #f5f5f5;width: 330px;margin-right: 5px;display: inline-block;padding:0 5px;box-sizing:border-box;}
    .login,.send_btn{padding: 5px 10px;border: none;outline: none;background-color: green;color: #fff;height: 30px;}
    .from_me,.to_me{margin-top: 5px;overflow: hidden;position: relative;}
   		/*	他人  */
    .to_me .user_names{display: inline-block;top: 0;vertical-align: top;line-height: 30px;}
    .to_me .msg_Div{word-break:break-all;max-width:300px; display: inline-block;padding:0 10px;line-height:30px; margin-left: 15px;position: relative;border:1px solid #E1DBDA;border-radius:4px;}
    .to_me .msg_Div:before{content: ""; position: absolute;left: -20px;top: 5px;width: 0;height: 0;font-size: 0;border-width: 10px;border-style: dashed dashed solid dashed;border-color: transparent #FFF transparent transparent;z-index: 2;}
	.to_me .msg_Div:after{content: ""; position: absolute;left: -21px;top:5px;width: 0;height: 0;font-size: 0;border-width: 10px;border-style: dashed dashed solid dashed;border-color: transparent #E1DBDA transparent transparent;z-index: 1;}
   /* 自己 */
    .from_me .user_names{display: inline-block;top: 0;vertical-align: top;line-height: 30px;float: right;min-width: 50px;}
    .from_me .msg_Div{word-break:break-all;max-width:300px; display: inline-block;padding:0 10px;line-height:30px; margin-right: 15px;position: relative;border:1px solid #ACD9F8;border-radius:4px;float: right;}
    .from_me .msg_Div:before{content: ""; position: absolute;right: -20px;top: 5px;width: 0;height: 0;font-size: 0;border-width: 10px;border-style: dashed dashed solid dashed;border-color: transparent transparent transparent #FFF;z-index: 2;}
	.from_me .msg_Div:after{content: ""; position: absolute;right: -21px;top: 5px;width: 0;height: 0;font-size: 0;border-width: 10px;border-style: dashed dashed solid dashed;border-color: transparent transparent transparent #ACD9F8;z-index: 1;}
    </style>
</head>  
  
<body>  
    <div id="to">发送给:[<span class="users">所有人</span>]</div>  
    <div id='container'>  
        <div id="left_panel">  
            <div id="left_top">  
                <!-- <div class="mes from_me">FROM ME</div>  
                <div class="mes to_me">TO ME</div> -->  
            </div>  
            <div id="left_bottom" contentEditable="true" class="cont_input" style="margin-top: 5px;"></div>  
            <div id="send_div" style="display: inline-block;"></div>
        </div>  
        <div id="right_panel">  
            <ul id="right_top" class="user_group">  
                 <li  class="users">所有人</li>
            </ul>  
            <div id="right_bottom" class="login_div">  
                <input type="text" id="user_name" placeholder="User Name" maxlength="10" required class="user_name" />  
                <input type="button" id="login" value="登录" onclick="login()" class="login"/>  
            </div>  
        </div>  
    </div>  
    <script>  
        var userName;  
        var toUser="";  
        var websocket=null;  
        function choose(arg){  
            toUser=arg.innerHTML;  
            document.getElementById("to").innerHTML='发送给:[<span class="users">'+toUser+'</span>]';  
            if(toUser==='所有人')toUser='';  
        }  
       
        function login(){  
           if(!document.getElementById("user_name").checkValidity())return ;  
            userName = document.getElementById("user_name").value;  
            if(userName=="")return;  
            ws();  
        }  
        function ws(){  
            if('WebSocket' in window){  
                websocket = new WebSocket("ws://"+location.host+"/web/message?id="+userName);
                //连接成功建立的回调方法  
                websocket.onopen = function(event){  
                    console.log("websocket open");  
                    var opt = document.getElementById("send_div");  
                    opt.innerHTML='<input type="button" id="login" value="发送" onclick="send()" class="send_btn" />';  
                    
                    var opt = document.getElementById("right_bottom");  //不能登录
                    opt.innerHTML='';  
                }  
                
                //连接发生错误的回调方法  
                websocket.onerror = function(){  
                     console.log("websocket error");  
                     alert("登录失败");  
                };  
                //连接关闭的回调方法  
                websocket.onclose = function(){  
                    console.log("websocket close");  
                    var opt = document.getElementById("right_bottom");  
                    opt.innerHTML='<input type="text" id="user_name" placeholder="User Name" maxlength="10" required class="user_name"/><input type="button" id="login" onclick="login()" value="登录" class="login"/>';  
                };  
                //接收到消息的回调方法  
                websocket.onmessage = function(e){  
                    var json = JSON.parse(e.data);  
                    if((typeof json.to) == 'undefined'){  
                        var html = '<li class="users" onclick="choose(this)">所有人</li>';  
                        for(var k in json){  
                        	if(userName!=json[k]){//避免把自己也算在用户里面
                        		html+='<li class="users" onclick="choose(this)">'+json[k]+'</li>';  
                        	}
                        }  
                        document.getElementById("right_top").innerHTML=html;  
                    }else{  
                        var record = document.getElementById("left_top");  
                        if(json.content==""||json.content==undefined||json.content==null){
                        	json.content="&nbsp;&nbsp;"
                        }
                        var html = '<div class="mes to_me"><span class="user_names">'+json.from+'</span><span class="msg_Div" >'+json.content+'</span></div>';  
                        record.innerHTML+=html;  
                    }  
                };  
            }else alert("Not Support!");  
        }  
        window.onbeforeunload = function(){  
            if(null!=websocket)  
                websocket.close();  
        }; 
        //发送消息
        function send(){  
            var input = document.getElementById("left_bottom");  
            var mes={  
                from:userName,  
                to:toUser,  
                content:input.innerHTML  
            };  
            if(null!=websocket)websocket.send(JSON.stringify(mes));  
            if(userName==""||userName==undefined){
            	userName="所有人"
            }
            if(input.innerHTML==""||input.innerHTML==undefined||input.innerHTML==null){
            	input.innerHTML="&nbsp;&nbsp;"
            }
            var html = '<div class="mes from_me"><span class="user_names">'+userName+'</span><span class="msg_Div" >'+input.innerHTML+'</span></div>';  
            document.getElementById("left_top").innerHTML+=html;  
            input.innerHTML='';  
        }  
    </script>  
</body>  
</html>  